import styles from './login.module.scss'
import { Input, Space, Form, Button,  } from 'antd'
import {LockOutlined, UserOutlined} from "@ant-design/icons";
import {LoginAPI} from "@/request/login";
import userState from '@/store/userState'
import { useDispatch,useSelector } from 'react-redux';
import {useNavigate} from "react-router-dom";

const Login = () => {
    const {isLogin, token, isAdmin} = useSelector((state: RootState) => ({
        isLogin: state.handleUser.isLogin,
        token: state.handleUser.token,
        isAdmin: state.handleUser.isAdmin,
    }))
    const dispatch = useDispatch();
    const navigate = useNavigate();
    const onFinish = async (values: {password: string;username:string}) => {
        const res = await dispatch(userState.asyncActions.login(values));
        if (res.code === 200) {
            navigate('/')
        }
    };
    return(
        <div className={styles.loginPage}>
            <div className={styles.loginBox}>
                <Space direction="vertical" size="large" style={{display: 'flex'}}>
                    <div className={styles.titleBox}>登录</div>
                    {/*<Input placeholder="账号" />*/}
                    {/*<Input.Password placeholder="密码" />*/}

                    <Form
                        name="normal_login"
                        className="login-form"
                        initialValues={{ remember: true }}
                        onFinish={onFinish}
                    >
                        <Form.Item
                            name="username"
                            rules={[{ required: true, message: 'Please input your Username!' }]}
                        >
                            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
                        </Form.Item>
                        <Form.Item
                            name="password"
                            rules={[{ required: true, message: 'Please input your Password!' }]}
                        >
                            <Input
                                prefix={<LockOutlined className="site-form-item-icon" />}
                                type="password"
                                placeholder="Password"
                            />
                        </Form.Item>
                        {/*<Form.Item>*/}
                        {/*    <Form.Item name="remember" valuePropName="checked" noStyle>*/}
                        {/*        <Checkbox>Remember me</Checkbox>*/}
                        {/*    </Form.Item>*/}

                        {/*    <a className="login-form-forgot" href="">*/}
                        {/*        Forgot password*/}
                        {/*    </a>*/}
                        {/*</Form.Item>*/}

                        <Form.Item>
                            <Button type="primary" htmlType="submit" className="login-form-button">
                                Log in
                            </Button>
                            {/*Or <a href="">register now!</a>*/}
                        </Form.Item>
                    </Form>
                </Space>
            </div>
        </div>
    )
}

export default Login